<template>
  <div>
    <div>
      <h2>关键属性</h2>
      <property-table :data.sync="majorData" @editInfo="editKeyInfo" @deleteInfo="delKeyInfo"></property-table>
      <Button class="addButton" type="primary" size="small" icon="plus" @click="addMajorData('key')">添加属性</Button>
      <br/>
    </div>
    <div style="margin-top: 15px">
      <h2>基础通用属性</h2>
      <property-table :data.sync="attributes" @editInfo="editNoKeyInfo" @deleteInfo="delNoKeyInfo"></property-table>
      <Button class="addButton" type="primary" size="small" icon="plus" @click="addAttributes('nonKey')">添加属性</Button>
      <br/>
    </div>
    <div>
      <Button class="saveButton" type="primary" icon="checkmark" @click="submit">保存数据</Button>
    </div>
    <!--新增编辑属性-->
    <Modal v-model="modal" :mask-closable=false loading="loading" width="450"
           title="字段名称">
      <Form ref="formInline" :label-width="100" :model="commonAttr" :key="commonAttr.id">
        <FormItem label="字段名称:">
          <Input type="text" :value="commonAttr.name" v-model="commonAttr.name"></Input>
        </FormItem>
        <FormItem>
          <Button @click="submitAttr" type="primary">确定</Button>
          <Button @click="cancel">取消</Button>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </Modal>
    <!--结束新增属性-->
  </div>
</template>

<script>
import PropertyTable from './propertyTable'
import {getTemplate, saveTemplate} from '../../api/template/templateApi'

export default {
  name: 'Template',
  data () {
    return {
      majorData: [],
      attributes: [],
      modal: false,
      commonAttr: {
        'index': '',
        'name': ''
      },
      key: ''
    }
  },
  mounted () {
    let cid = this.$route.query.cid
    this.loadData(cid)
  },
  components: {
    PropertyTable
  },
  methods: {
    loadData (cid) {
      let _this = this
      getTemplate(cid, data => {
        let majorData = data.majorProperties
        majorData.forEach(value => {
          let obj = {}
          obj.name = value
          obj.isKey = true
          _this.majorData.push(obj)
        })
        let attrData = data.attributes
        attrData.forEach(value => {
          let obj = {}
          obj.name = value
          obj.isKey = false
          _this.attributes.push(obj)
        })
      })
    },
    addMajorData (params) {
      this.modal = true
      this.key = params
    },
    addAttributes (params) {
      this.modal = true
      this.key = params
    },
    submitAttr () {
      if (this.key === 'key') {
        console.log(this.key)
        // 区分是添加和编辑，不去渲染vue的data
        let data = this.majorData
        let commonData = this.commonAttr
        if (commonData.index === '' || commonData.index === undefined) {
          data.push(commonData)
        } else {
          data[commonData.index] = commonData
        }
        this.majorData = data
        console.log(this.majorData)
      } else {
        // 区分是添加和编辑，不去渲染vue的data
        console.log(this.key)
        let data = this.attributes
        let commonData = this.commonAttr
        if (commonData.index === '' || commonData.index === undefined) {
          data.push(this.commonAttr)
        } else {
          data[commonData.index] = commonData
        }
        this.attributes = data
        console.log(this.attributes)
      }
      this.modal = false
      this.commonAttr = {
        'index': '',
        'name': ''
      }
    },
    cancel () {
      this.modal = false
    },
    /**
     * 提交后台数据
     */
    submit () {
      // post请求提交数据，字符串数组逗号隔开
      let cid = this.$route.query.cid
      let majorProperties = this.majorData
      let attributes = this.attributes
      let majorArray = []
      let attrArray = []
      majorProperties.forEach(data => {
        majorArray.push(data.name)
      })
      attributes.forEach(data => {
        attrArray.push(data.name)
      })
      let param = {
        categoryId: cid,
        majorProperties: majorArray,
        attributes: attrArray
      }
      saveTemplate(param, data => {
        // 跳转回类目页面
        this.$router.push({name: 'Category'})
      })
    },
    /**
     * 接收子组件的需要编辑的信息
     */
    editKeyInfo (data, index) {
      this.modal = true
      this.commonAttr = data
      this.commonAttr.index = index
      this.commonAttr.isKey = true
      this.key = 'key'
    },
    editNoKeyInfo (data, index) {
      this.modal = true
      this.commonAttr = data
      this.commonAttr.index = index
      this.commonAttr.isKey = false
      this.key = 'nonKey'
    },
    delKeyInfo (index) {
      let data = this.majorData
      data.splice(index, 1)
      this.majorData = data
    },
    delNoKeyInfo (index) {
      let data = this.attributes
      data.splice(index, 1)
      this.attributes = data
    }
  }
}
</script>

<style scoped>
  .addButton {
    margin-top: 10px;
  }
  .saveButton {
    margin-top: 10px;
    margin-left: 40%;
  }
</style>
